import React, { useEffect, useState } from 'react'
import { getUserInfo } from '../../api/user'
import { Table, Modal, Form, Space, Button, Input, Radio } from 'antd'

const columns = [
  {
    title: '用户名',
    dataIndex: 'name'
  },
  {
    title: '性别',
    dataIndex: 'gender'
  },
  {
    title: '年龄',
    dataIndex: 'age'
  },
  {
    title: '用户账号',
    dataIndex: 'account'
  },
  {
    title: '余额',
    dataIndex: 'money'
  },
  {
    title: '会员等级',
    dataIndex: 'rank'
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Space size="middle">
        <Button type="primary">修改</Button>
        <Button type="danger">删除</Button>
      </Space>
    )
  }
]

const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  return (
    <Modal
      visible={visible}
      title="用户"
      okText="提交"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            form.resetFields()
            onCreate(values)
          })
          .catch(info => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public'
        }}
      >
        <Form.Item
          name="用户姓名"
          label="name"
          rules={[
            {
              required: true,
              message: '请输入用户名!'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="gender"
          label="性别"
          rules={[
            {
              required: true,
              message: '请输入性别!'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="年龄"
          label="age"
          rules={[
            {
              required: true,
              message: '请输入年龄!'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="账号"
          label="account"
          rules={[
            {
              required: true,
              message: '请输入账号!'
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="money"
          label="余额"
          rules={[
            {
              required: true,
              message: '请输入余额!'
            }
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default function UserInfo() {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()

  const onCreate = values => {
    console.log('Received values of form: ', values)
    setVisible(false)
  }

  //获取数据方法
  const getDataSource = () => {
    setLoading(true)
    getUserInfo().then(res => {
      setData(res.list)
      setLoading(false)
    })
  }
  //换页获取数据方法
  const changeHandler = pagination => {
    getDataSource()
  }

  useEffect(() => {
    getDataSource()
  }, [])

  return (
    <>
      <>
        {/* 添加按钮元素 */}
        <Button
          type="primary"
          onClick={() => {
            setVisible(true)
          }}
        >
          添加用户
        </Button>
        {/* 模态框元素 */}
        <CollectionCreateForm
          visible={visible}
          onCreate={onCreate}
          onCancel={() => {
            setVisible(false)
          }}
        />
      </>
      {/* 表格元素 */}
      <Table
        columns={columns}
        loading={loading}
        rowKey="id"
        dataSource={data}
        onChange={changeHandler}
      />
    </>
  )
}
